<!-- 添加好友 -->
<template>
  <div id="">
      <headerbox :headerTitle="'添加'" :hasBack='true'></headerbox>
      <!-- :scanIcon="true"  扫描的图标显示 -->
      <!-- <headerbox :headerTitle="'添加'" :hasBack='true' :scanIcon="true"></headerbox> -->

      <searchTemplate @toSearchFriend="toSearchFriend"></searchTemplate>

      <div class="bgWhite mb10">
        <p class="tipTxt">邀请好友</p>
        <div class="inviteType">
          <span @click="getAddressBookPhone">
            <img src="@/assets/friendImage/addressbook.png" alt="">
            <p>通讯录</p>
          </span>
          <span @click="wxShare">
            <img src="@/assets/friendImage/wechat.png" alt="">
            <p>微信</p>
          </span>
          <span @click="qqShare">
            <img src="@/assets/friendImage/qq.png" alt="">
            <p>QQ</p>
          </span>
        </div>
      </div>

      <div class="bgWhite">
        <p class="tipTxt">推荐好友</p>
        <v-scroll :on-refresh="onRefresh" :on-infinite="enableInfinite ? onInfinite : undefined" style="bottom:0; top:40vh;">
          <div v-for="recommendItem in recommendList" :key="recommendItem.key">
            <friendItem :recommendItem="recommendItem"></friendItem>
          </div>
        </v-scroll>
      </div>
      <mt-popup
        v-model="popupVisible"
        position="bottom" style="width:100%; height:100vh; overflow:scroll;">
        <addressbook :addressbookList="addressbookList" @addressbookEvent="addressbookEvent"></addressbook>
      </mt-popup>
  </div>
</template>
<script>
import {circleUserSearch,circleUserRecommend} from '@/utils/ajaxRequest.js';
import vScroll from '@/components/loadMore/loadMore';
export default {
  name: "",
  data: () => ({
    searchKey:'',
    xlyd_loginInfo:'',    //用户信息
    pageNo:1,   //分页
    enableInfinite:true,
    recommendList:[],
    popupVisible:false,   //弹出层
    addressbookList:[],   //存放通讯录数据
  }),
  components: {
    friendItem:()=>import('./friendItem'),
    searchTemplate:()=>import('@/components/searchTemplate/searchTemplate'),
    vScroll,
    addressbook:()=>import('./addressbook'),
  },
  methods: {
    //搜索
    toSearchFriend() {
      this.$router.push({name:'searchFriend'});
    },
    onRefresh(done) {   //刷新
      this.pageNo = 1;
       this.getRecommendList();
       done() // call done
    },
    onInfinite(done) {    //加载
        let self = this;
        self.enableInfinite = false;
        this.pageNo++;
        this.getRecommendList();
        done();
     },
     // 获取推荐好友列表
     getRecommendList() {
       let self = this;
       circleUserRecommend({
         token:this.xlyd_loginInfo.token,
         currentPage:this.pageNo
       }).then(res=>{
         console.log(res);
         if(res.data.code==200){
           let result = res.data.result;
           if (result.length<1) {
             self.enableInfinite = false;    //关闭上拉加载
           }else{
             self.enableInfinite = true;     //打开上拉加载
           }
           if (self.pageNo==1) {
             self.recommendList = result;
           }else{
             self.recommendList = self.matchList.concat(result);
             console.log(self.matchList);
           }
         }
       })
     },
     // 获取通讯录——需要在手机上运行
     getAddressBookPhone() {
       let self = this;
       console.log('获取通讯录');
       plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function (addressbook) {
      		addressbook.find([],function(contacts){     //[] or null: 获取所有通讯录信息
      			console.log(contacts);
            self.addressbookList = contacts;
            self.popupVisible = true;   //弹出层
      		}, function () {
      			console.log("error");
      		},{multiple:true});
      	},function(e){
      		alert("Get address book failed: " + e.message);
      	});
     },
     addressbookEvent(data) {
       this.popupVisible = false;
     },
     // 微信分享
     /*
     var ids = [{
          id: "weixin",
          ex: "WXSceneSession"  /*微信好友
      }, {
          id: "weixin",
          ex: "WXSceneTimeline" /*微信朋友圈
      }
     */
     // 微信好友分享
     wxShare() {
       let self = this;
       let shareId = 'weixin';
       plus.share.getServices(function(s){
    		let shares = s;   //分享途径列表  id:weixin/qq
        for (let key of shares) {
          if(shareId==key.id) {    //有存在分享列表里面
            console.log(key.authenticated);
            if (key.authenticated) {    //已授权
              self.sendShareMsg(key)
            }else {       //未授权
              key.authorize(function(){   //重新授权
                self.toast('认证完成')
                self.sendShareMsg(key)
              },function(){     //授权失败
                self.toast('未进行认证')
              })
            }
          }else{
            console.log(key.id);
          }
        }
    	}, function(e){
    		self.toast("获取分享服务列表失败："+e.message);
    	});
    },
    // qq好友分享
    qqShare() {
      let self = this;
      let shareId = 'qq';
      plus.share.getServices(function(s){
       let shares = s;   //分享途径列表  id:weixin/qq
       for (let key of shares) {
         if(shareId==key.id) {    //有存在分享列表里面
           console.log(key.authenticated);
           if (key.authenticated) {    //已授权
             self.sendShareMsg(key)
           }else {       //未授权
             key.authorize(function(){   //重新授权
               self.toast('认证完成')
               self.sendShareMsg(key)
             },function(){     //授权失败
               self.toast('未进行认证')
             })
           }
         }else{
           console.log(key.id);
         }
       }
     }, function(e){
       self.toast("获取分享服务列表失败："+e.message);
     });
   },
    sendShareMsg(s) {
      /**
     * 发送分享消息
     */
     let self = this;
        var msg = {
            content: '分享-雪陆运动',
            href: 'https://www.pgyer.com/VXkQ',   //下载地址
            title: '雪陆运动',
            content: '约上好友一起去打球，带上教练练起来',
            thumbs: [require('@/assets/logo3.png')],
            pictures: [require('@/assets/logo2.png')],
            extra: {
                scene: ''       //分享消息扩散参数
            }
        };
        s.send(msg, function() {
            self.toast("分享成功!");
        }, function(e) {
            self.toast("分享失败!");
        });
    }
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.xlyd_loginInfo = xlyd_loginInfo;
    this.getRecommendList();
  },
  plusReady:function() {
    let self = this;
    console.log('plusReady log');

  }
}
</script>
<style lang="scss" scoped>
.searchBox{
  @include flex;
  height: 20px; line-height: 20px;
  margin:10px;
  background: white;
  border-radius: 4px;
  padding: 6px 10px;
  input{
    @include flexcell;
    margin-left: 10px;
    height: 20px;
  }
}
.tipTxt{
  color: $lightColor;
  font-size: 12px;
  padding: 10px;
}
.inviteType{
  @include flex;
  padding-bottom: 10px;
  span{
    @include flexcell;
    text-align: center;
    img{
      width: 60px;
      margin-bottom: 6px;
    }
  }
}
</style>
